{__NOLAYOUT__}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>{$zy.0.title.val}-{$seo_title}</title>
    <include file="Index:meta" />
</head>

<body>
    <div id="page">
        <!-- Header -->
        <include file="Index:header" />
        <!-- Header End -->
        <section class="details-head container pt-40 mb-20">
            <div class="row">
                <div class="col-md-12 clearfix breadcrumb_box mb-40 hide-sm">
                    <ol class="breadcrumb">
                        <li>
                            <a href="/">
                                <i class="icon icon-home"></i> 首页</a>
                        </li>
                                                <li>
                            <a href="index.php?m=Index&a=major&pid={$zy.0.id.val}">{$zy.0.title.val}</a>
                        </li>
                        <li>
                            相关资源
                        </li>
                      
                    </ol>
                </div>
                <div class="col-md-6 details-head-img mb-20">
                    <div class="row">
                        <img src="__PUBLIC__/dist/image/imgBig.jpg" data-big="http://hgedu.fjhgkj.com{$zy.0.bannerimg.val}">
                    </div>
                </div>
                <div class="col-md-6 details-head-text mb-20">
                    <h1 class="pt-20 mb-40">{$zy.0.title.val}</h1>
                    <div class="con-group">
                        <p class="con-title">专业简介：</p>
                        <div>{$zy.0.description.val}</div>
                    </div>
                    <div class="details-head-btn pt-10">
                        <a class="btn btn-primary" href="index.php?m=Index&a=major_details&zid={$pid}"
                            data-remote="index.php?m=Index&a=major_details&zid={$pid}"
                            data-toggle="modal" data-show-header="false" data-size="lg" data-height="auto">相关信息</a>


                    </div>
                </div>
            </div>
        </section>

        <section class="details-content container">
            <div class="pt-20">
               <!-- 微课 -->
                <div class="card-group clearfix mb-20">
                    <h2 class="con-title mb-20">视频素材</h2>
                    <ul class="row list-unstyled">
                        <volist name="file['mp4']" id="vo" key='k' empty="$empty">
                            <!-- 微课 cell -->
                            <li class="card-box">
                                <div class="card-box-content">
                                    <div class="card-img mb-20"> 
                                        <a href="index.php?m=Index&a=video&file=http://hgedu.fjhgkj.com/{$vo.filepath}&title={$vo.filename|urlencode=###|urlencode=###}" target="_blank" title="{$vo.filename}">

                                            <img src="__PUBLIC__/dist/image/img.jpg" data-src="http://hgedu.fjhgkj.com{$vo.filepath}">
                                            <div class="backdrop"></div>
                                            <i class="icon icon-plays"></i>
                                        </a>
                                    </div>
                                    <div class="card-title">
                                        <a download="{$vo.filename}" href="http://hgedu.fjhgkj.com{$vo.filepath}" class="icon icon-down"></a>
                                        <div class="text-ellipsis">
                                        <a href="index.php?m=Index&a=details_pdf&file={$vo.filepath}&title={$vo.filename|urlencode=###|urlencode=###}" target="_blank" title="{$vo.filename}">{$vo.filename}</a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <!-- 微课 cell end-->
                        </volist>
                    </ul>
                </div>

                <!-- 图片素材 -->
                <div class="card-group clearfix mb-20">
                    <h2 class="con-title mb-20">图片素材</h2>
                    <div class="list-down row imgbox">
                        <ul>
                            <volist name="file['img']" id="vo" empty="$empty">
                                <div class="card-box">
                                    <div class="card-box-content">
                                        <div class="card-img">
                                            <img data-image="http://hgedu.fjhgkj.com{$vo.filepath}" data-fileonoff="" data-title="{$vo.filename}" data-time="{$vo.createtime|date='Y-m-d',###}" data-content=""
                                            src="__PUBLIC__/dist/image/img.jpg" data-src="http://hgedu.fjhgkj.com{$vo.filepath}" alt="{$vo.filename}">
                                        </div>
                                    </div>
                                </div>
                            </volist>
                        </ul>
                    </div>
                </div>
                
                <div class="card-group clearfix">
                    <h2 class="con-title mb-20">其他素材</h2>
                    <div class="list-down row">
                        <ul>
                            <volist name="file['qita']" id="vo" empty="$empty">
                                <li>
                                    <div class="row">
                                        <a download="{$vo.filename}" class="icon icon-down" href="http://hgedu.fjhgkj.com{$vo.filepath}" title="{$vo.filename}"></a>
                                        <p class="title text-ellipsis" title="{$vo.filename}" >{$vo.filename}</p>
                                    </div>
                                </li>
                            </volist>
                        </ul>
                    </div>
                </div>
                <!-- end -->
            </div>
        </section>

        <include file="Index:footer" />
    </div>

    <!-- 图片显示 -->
    <div class="modal fade" id="lightimg">
        <div class="modal-dialog">
            <div class="modal-content clearfix">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <div class="col-md-9 image">
                    <button class="controller prev show">
                        <i class="icon icon-chevron-left"></i>
                    </button>
                    <button class="controller next show">
                        <i class="icon icon-chevron-right"></i>
                    </button>
                    <img id="lightimgSrc" src="">
                </div>
                <div class="col-md-3 content">
                    <h4 id="lightimgTitle" class="mb-20">图片名称</h4>
                    <p id="lightimgTime" class="mb-10">时间：</p>
                    <p id="lightimgContent" class="mb-60"></p>
                    <div class="text-right">
                        <a download class="btn btn-block btn-primary" id="lightimgDown">下载</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <i class="goTop"></i>

    <script>
        $(function () {
            var obj = $("[data-big]");
            var img = new Image();
            img.src = obj.data("big");
            img.onload = function () {
                obj.attr("src",obj.data("big"));
                var h = obj.width() / (640/360) + "px";
                obj.css("height",h)
            };
            img.onerror = function () {
                obj.src = "__PUBLIC__/dist/image/imgBig.jpg"
            }


            var imgIndex =0;
            // modal显示 IMG
            function lightImg(num) {
                if (num == 0) {
                    if (imgbox.find("[data-image]").length - 1 == 0) {
                        $("#lightimg .controller").removeClass("show");
                    } else {
                        $("#lightimg .controller.prev").removeClass("show");
                        $("#lightimg .controller.next").addClass("show");
                    }
                } else if (num == imgbox.find("[data-image]").length - 1) {
                    $("#lightimg .controller.prev").addClass("show");
                    $("#lightimg .controller.next").removeClass("show");
                } else {
                    $("#lightimg .controller.prev").addClass("show");
                    $("#lightimg .controller.next").addClass("show");
                }

                var o = imgbox.find(".card-box").eq(num).find("img");
                $("#lightimgSrc").attr("src", o.data("image"));
                $("#lightimgTitle").html(o.data("title"));
                $("#lightimgDown").attr("href", o.attr("src"));
            }

            //图片显示
            imgbox = $(".imgbox");
            imgbox.on("click", "[data-image]", function () {
                var that = $(this);
                imgIndex = that.parents(".card-box").index();

                lightImg(imgIndex)
                $('#lightimg').modal('show');
            })

            $("#lightimg").on("click", ".prev", function () {
                imgIndex--;
                lightImg(imgIndex);
            })
            $("#lightimg").on("click", ".next", function () {
                imgIndex++;
                lightImg(imgIndex);
            })


        })
    </script>
</body>

</html>